<template>
	<view class="">
		<view class="example" style="padding-top: 40px;">
			<uni-forms :rules="rules" label-width='90px' ref="baseForm" :modelValue="usedGoodsInfo">
				<uni-forms-item label="名称" required name="articlesName">
					<uni-easyinput v-model="usedGoodsInfo.articlesName" placeholder="请输入物品名称" />
				</uni-forms-item>
				<uni-forms-item label="详情" required name="articlesInfo">
					<uni-easyinput type="textarea" v-model="usedGoodsInfo.articlesInfo"
						placeholder="请输入物品详情、介绍、使用情况、购买时间等" />
				</uni-forms-item>
				<uni-forms-item label="原价(元)" required name="articlesOriginalPrice">
					<uni-easyinput v-model="usedGoodsInfo.articlesOriginalPrice" placeholder="请输入物品原价" />
				</uni-forms-item>
				<uni-forms-item label="二手价(元)" required name="articlesSecondHandPrice">
					<uni-easyinput v-model="usedGoodsInfo.articlesSecondHandPrice" placeholder="请输入物品二手价" />
				</uni-forms-item>
				<uni-forms-item label="类型" required name="articlesType">
					<uni-data-select v-model="usedGoodsInfo.articlesType" :localdata="range"
						@change="setArticlesType"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="上传图片" required>
					<view class="example-body">
						<uni-file-picker @delete="deletedImg" @select="selectedImg" limit="3" :del-icon="true"
							disable-preview file-extname="png,jpg" file-mediatype="image">
						</uni-file-picker>
					</view>
				</uni-forms-item>
				<button type="primary" @click="addUsedGoods('baseForm')">上传</button>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState,
		mapMutations
	} from 'vuex'
	import NowTime from '../publicData/nowTime.js'
	import baseUrl from '../publicData/baseUrl.js'
	import uploadFiles from '../publicData/uploadFiles.js'

	export default {
		name: 'addUsedGoods',

		data() {
			return {
				range: [{
						value: '电子产品',
						text: "电子产品"
					},
					{
						value: '生活用品',
						text: "生活用品"
					},
					{
						value: '体育用品',
						text: "体育用品"
					},
					{
						value: '乐器',
						text: "乐器"
					},
					{
						value: '学习用品',
						text: "学习用品"
					},
					{
						value: '其他',
						text: "其他"
					}
				],
				rules: {
					articlesName: {
						rules: [{
							required: true,
							errorMessage: '请填写!'
						}]
					},
					articlesInfo: {
						rules: [{
							required: true,
							errorMessage: '请填写！'
						}]
					},
					articlesOriginalPrice: {
						rules: [{
							required: true,
							errorMessage: '请填写！'
						},
						{
							format: 'number',
							errorMessage: '只能位数字！'
						}]
					},
					articlesSecondHandPrice: {
						rules: [{
							required: true,
							errorMessage: '请填写！'
						},
						{
							format: 'number',
							errorMessage: '只能位数字！'
						}]
					},
					articlesType: {
						rules: [{
							required: true,
							errorMessage: '请填写！'
						}]
					},
				},
				usedGoodsInfo: {
					uId: null,
					articlesName: '',
					articlesInfo: '',
					articlesOriginalPrice: '',
					articlesSecondHandPrice: '',
					articlesType: '',
					articlesImgSrcs: null,
					articlesReleaseTime: ''
				},
				articlesImgList: [], //  图片列表
			}
		},

		computed: {
			...mapState('userModule', ["userInfo"]),
			...mapState('publicModule', ["token"])
		},
		
		onLoad() {
			
		},
		
		methods: {
			
			...mapActions('usedGoodsModule', ["addUsedGoodsInfo"]),

			// 选择图片后触发
			selectedImg(e) {
				e.tempFilePaths.forEach(file => {
					this.articlesImgList.push(file)
				})
			},

			// 删除图片后触发
			deletedImg(e) {
				// 从图片类表中删除被删除的图片文件信息
				this.articlesImgList.forEach((item, index) => {
					if (item.slice(12) === e.tempFilePath.slice(12)) {
						this.articlesImgList.splice(index, 1)
					}
				})
			},

			// 设置二手物品类型
			setArticlesType(e) {
				this.usedGoodsInfo.articlesType = e
			},

			// 上传二手物品
			addUsedGoods(ref) {
				const that = this

				// 设置 uId
				this.usedGoodsInfo.uId = this.userInfo.id

				// 设置发布时间
				this.usedGoodsInfo.articlesReleaseTime = NowTime()

				// 校验并提交
				that.$refs[ref].validate().then(res => {
					// 判断是否上传图片
					if (that.articlesImgList.length <= 0) {
						return uni.showToast({
							title: '至少添加一张物品图片',
							icon: 'none'
						})
					}

					// 上传图片
					uploadFiles({
						url: baseUrl.host + '/uploadUserGoodsImgs',
						files: that.articlesImgList,
						token: that.token
					}).then(res => {
						that.usedGoodsInfo.articlesImgSrcs = res

						// 判断是否成功上传图片
						if (that.usedGoodsInfo.articlesImgSrcs.length <= 0) {
							return uni.showToast({
								title: '至少添加一张物品图片',
								icon: 'none'
							})
						}
						
						that.usedGoodsInfo.articlesImgSrcs = JSON.stringify(that.usedGoodsInfo.articlesImgSrcs)
						
						// 上传
						that.addUsedGoodsInfo({
							usedGoodsInfo: that.usedGoodsInfo,
							token: that.token
						})
					})
				}).catch(err => {
					console.log('err', err);
				})

			},
		},
	}
</script>

<style scoped>
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
</style>